@extends("/paging_template",title="订单列表")
@import com.mgfireworks.mgplatform.mgadmin.stock.model.*
@import com.mgfireworks.mgplatform.mgadmin.constants.*
@args List<Order> orderList
<s_panel>
	<s_select name="orderState" text="订单状态" deftext="所有" value="@val("orderState")">
		<option value="0">未付款</option>
        <option value="4">已完成</option>
	</s_select>
	<s_select name="queryDay" text="订单时间" deftext="所有" value="@val("queryDay")">
        <option value="0">今天</option>
        <option value="1">昨天</option>
        <option value="30">近30天</option>
        <option value="365">近一年</option>
    </s_select>
	<s_buttons slot="button" cols="1">
		<s_button type="query"></s_button>
	</s_buttons>
</s_panel>

@if(orderList){
<div class="accordion" role="tablist">
@for(Order o : orderList){
    <order_list
            index="@o_index"
            order_id="@o.getOrderId()"
            order_time="@o.getOrderTime()"
            order_state="@o.getOrderState()"
            order_state_name="@OrderState.valueOf(o.getOrderState())"
            item_count="@o.getItemCount()"
            order_amount="@o.getOrderAmount()"
    >
        @for(OrderItem oi : o.getOrderItemInfoList()){
        <order_item
                index="@(oi_index-1)"
                product_id="@oi.getProductId()"
                img="@url(oi.getMainImg())"
                name="@oi.getProductName()"
                price="@oi.getPrice()"
                num="@oi.getNum()">
            <num_changer name="num" value="@oi.getNum()"></num_changer>
        </order_item>
        }
    </order_list>
}
</div>
}else{
<div><i class="fa fa-exclamation-circle"></i>暂无进货单!</div>
}
<div id="jsCheckOutConfirm" style="display: none">
    <h4>
        该订单<span class="badge bg-red">{itemCount}</span>件商品共计
        <span class="badge bg-red">{orderAmount}</span>元，确定支付？
    </h4>
</div>

@section(vue){
<template id="template-order-list">
    <div class="panel js-partial-form">
        <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" :href="'#orderItemPanel_'+index">
            <h4 class="panel-title row" style="line-height: 30px;">
                <span class="col-md-4 col-sm-12">单号：{{order_id}}</span>
                <span class="col-md-4 col-sm-12">时间：{{order_time}}</span>
                <span class="col-md-4 col-sm-12">状态：<span :class="'badge '+(order_state==@OrderState.UNPAID.value()?'bg-red':'bg-green')">{{order_state_name}}</span></span>
                <input type="hidden" name="itemCount" :value="item_count"/>
                <span class="col-md-4 col-sm-12">数量：<span class="badge bg-blue">{{item_count}}</span></span>
                <input type="hidden" name="orderAmount" :value="order_amount" class="jsOrderAmount"/>
                <span class="col-md-4 col-sm-12">总额：<span class="badge bg-blue jsOrderAmount">{{order_amount}}</span>元</span>
            </h4>
            <div>
                <a :href="'cancel.json?orderId='+order_id" :class="'btn btn-danger js-json-post '+(order_state==@OrderState.UNPAID.value()?'':'disabled')"><i class="fa fa-remove"></i>取消</a>
                <a :href="'checkout.json?orderId='+order_id" :class="'btn btn-success js-json-post '+(order_state==@OrderState.UNPAID.value()?'':'disabled')" confirm="#jsCheckOutConfirm"><i class="fa fa-check"></i>去支付</a>
                <a :href="'updateItems.json?orderId='+order_id" :class="'btn btn-primary js-json-post '+(order_state==@OrderState.UNPAID.value()?'':'disabled')"><i class="fa fa-save"></i>保存修改</a>
            </div>
        </div>
        <div :id="'orderItemPanel_'+index" class="panel-collapse collapse" style="height: 0px;">
            <div class="panel-body">
                <ul class="list-group row">
                    <slot></slot>
                </ul>
            </div>
        </div>
    </div>
</template>

<!--产品仓库->我的订单中的订单项模板-->
<template id="template-order-item">
    <li class="row thumbnail col-md-6 col-md-12" style="height: auto;">
        <div class="col-xs-6">
            <a href="#">
                <img class="media-object" :src="img" :alt="name">
            </a>
        </div>
        <div class="col-xs-6">
            <h4 class="media-heading">{{name}}</h4>
            <div class="input-group">
                <a class="input-group-addon btn" v-on:click="calcPrice(-1)"><i class="fa fa-minus"></i></a>
                <input type="hidden" :name="'items['+index+'].productId'" :value="product_id"/>
                <input :name="'items['+index+'].num'" type="text" :value="$props.num" readonly="readonly" class="form-control">
                <a class="input-group-addon btn" v-on:click="calcPrice(1)"><i class="fa fa-plus"></i></a>
            </div>
            <h4>单价：<span class="badge">{{price}}</span>元</h4>
            <h4>合计：<span class="badge">{{price*num}}</span>元</h4>
        </div>
    </li>
</template>
}

@section(script1){
<script type="text/javascript">
    //订单列表模板
    Vue.component('order_list',{
        props:["index","order_id","order_time","order_state","order_state_name","item_count","order_amount"] ,
        methods:{
            calcPrice:function () {
                var amount=0;
                $.each(this.$children,function (i,n) {
                    amount+=n.num*n.price;
                });
                //this.order_amount=amount; 这样会重置子级属性
                $(".jsOrderAmount",this.$el).text(amount);
            }
        },
        template: '#template-order-list'
    });
    //订单项模板
    Vue.component('order_item', {
        props:["index","product_id","img","name","price","num"],
        methods:{
            calcPrice:function (step) {
                var _num=this.num;
                _num=parseInt(_num)+step;
                this.num=_num<=1?1:_num;
                this.$parent.calcPrice();
            }
        },
        template: '#template-order-item'
    });
</script>
}